<!--
 * @Author: bsj
 * @Date: 2024-11-15
 * @LastEditors: baoshijie
 * @LastEditTime: 2024-11-21
 * @Description: file content
 * @FilePath: \computing-equipment\src\views\userInfo\index.vue
-->
<template>
     <div class="aircraftManagement">
          <div class="left-box">
               <ul>
                    <li v-for="item in leftList" class="left-box-item" :key="item.id" @click="setActiveId(item.id)"
                         :class="{ active: activeId === item.id }">
                         {{ item.name }}
                    </li>
               </ul>
          </div>
          <div class="right-box">
               <userInfo v-if="activeId === 1" />
               <statistic v-if="activeId === 2" />
          </div>
     </div>
</template>

<script setup>
import userInfo from './userInfo.vue';
import statistic from './statistic.vue';
const activeId = ref(1)
const leftList = ref([{
     name: '用户信息',
     id: 1
}, {
     name: '统计信息',
     id: 2
}])
const setActiveId = (id) => {
     activeId.value = id
     sessionStorage.setItem('activeIdUserInfo', id)

}
onMounted(() => {
     activeId.value = Number(sessionStorage.getItem('activeIdUserInfo')) || 1
     sessionStorage.setItem('activeIdUserInfo', activeId.value)
})
</script>
<style lang="scss" scoped>
.aircraftManagement {
     display: flex;
     height: 100%;

     .left-box {
          width: 200px;
          padding-right: 10px;
          min-width: 200px;
          .left-box-item {
               cursor: pointer;
               font-size: 14px;
               font-weight: bold;
               margin: 10px 0;
          }

          .active {
               color: var(--el-color-primary);
          }

          // background-color: #fff;
     }

     .right-box {
          flex: 1;
          background-color: #fff;
          padding: 20px;
     }
}
</style>